<h4>mat-select</h4>
<mat-form-field>
  <mat-label>Pokemon</mat-label>
  <mat-select [formControl]="pokemonControl">
    <mat-option>-- None --</mat-option>
    @for (group of pokemonGroups; track group) {
      <mat-optgroup [label]="group.name"
                    [disabled]="group.disabled">
        @for (pokemon of group.pokemon; track pokemon) {
          <mat-option [value]="pokemon.value">{{pokemon.viewValue}}</mat-option>
        }
      </mat-optgroup>
    }
  </mat-select>
</mat-form-field>

<h4>native html select</h4>
<mat-form-field>
  <mat-label>Cars</mat-label>
  <select matNativeControl>
    <optgroup label="Swedish Cars">
      <option value="volvo">volvo</option>
      <option value="saab">Saab</option>
    </optgroup>
    <optgroup label="German Cars">
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </optgroup>
  </select>
</mat-form-field>
